<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>
<apes-content class="inquiry-sheet">

  <!-- 选择车型 -->
  <apes-card [apesTitle]="'选择车型'">

    <div apes-row>

      <div apes-col [apesSpan]="1"></div>
      <div apes-col [apesSpan]="4">
        <!--        <apes-input-group [apesAddOnAfter]="suffixButton">-->
        <!--          <input [(ngModel)]="inputVIN" type="text" apes-input placeholder="请输入17位vin号码" />-->
        <apes-ng-select [searchSelectApi]="customerCarApi"
                        [domain]="customerCarDomain"
                        [selectData]="customerCar"
                        [valueFormatter]="'value.carLicense  +  (value.customer == undefined ? \'\' : (\'-\' + value.customer.realname)) + (value.customer == undefined ? \'\' : (\'-\' +value.customer.mobile))'"
                        [downFormatter]="'value.carLicense  +  (value.customer == undefined ? \'\' : (\'-\' + value.customer.realname)) + (value.customer == undefined ? \'\' : (\'-\' +value.customer.mobile))'"
                        [placeholder]="'请输入车牌号码'"
                        [searchFormId]="customerCarApi"
                        (change)="checkVINData($event)"></apes-ng-select>
        <!--        </apes-input-group>-->
        <!--        <ng-template #suffixButton>-->
        <!--          <button apes-button-->
        <!--                  [disabled]="inputVIN == ''"-->
        <!--                  [apesLoading]="isLoading"-->
        <!--                  apesType="primary"-->
        <!--                  (click)="checkVIN()">-->
        <!--            查询-->
        <!--          </button>-->
        <!--        </ng-template>-->


      </div>

    </div>

  </apes-card>

  <!-- 车型信息 -->
  <apes-card [apesTitle]="'车型信息'" *ngIf="showCarModel()">
    <div apes-col [apesMd]="24">
      <div apes-form-item apes-row class="apes-item" style="padding: 16px;">
        <formly-form [model]="carModel" [fields]="carField" [form]="form"></formly-form>
      </div>
    </div>
  </apes-card>

  <!-- 询价配件 -->
  <apes-card [apesTitle]="titleTemplate" *ngIf="true">

    <ng-template #titleTemplate>
      <div class="inquiry-sheet-title">
        <div>询价配件</div>
        <div class="inquiry-sheet-subtitle">支持批量复制粘贴配件名称/编码~</div>
      </div>
    </ng-template>

    <div class="inquiry-sheet-parts-main">
      <apes-card>
        <div apes-row class="parts-main">
          <div apes-col [apesSpan]="1" class="parts-list-num">
            <span>{{partsList.length == 0 ? 1 : partsList.length + 1}}</span>
          </div>
          <div apes-col [apesSpan]="3">
            <label>
              <input apes-input
                     placeholder="请输入配件名称/编码"
                     [disabled]="checkQueryData()"
                     [(ngModel)]="partsModel['value']"
                     (ngModelChange)="checkParts($event,partsModel)"
                     (paste)="onPaste($event,partsModel)"
                     (focus)="checkFocus(partsModel)"
                     (keyup.enter)="enterPares($event,partsModel)"
                     apes-popover
                     [(apesVisible)]="partsModel['visible']"
                     (blur)="closeList(partsModel,$event)"
                     apesPopoverTrigger="null"
                     [apesPopoverContent]="inputTemplate"
                     apesPopoverPlacement="bottomLeft"
              />
              <span *ngIf="checkPartsName(partsModel,1)" class="parts-list-inputTooltip">该配件名有重复！</span>
              <ng-template #inputTemplate>
                <div class="inquiry-sheet-parts-list">
                  <ng-container *ngIf="partsModel['loading']">
                    <apes-spin apesSimple style="text-align: center;margin: 20px;"></apes-spin>
                  </ng-container>
                  <ng-container *ngIf="!partsModel['loading']">
                    <div *ngIf="partsModel['items'] && partsModel['items'].length == 0">暂无配件信息</div>
                    <div *ngIf="partsModel['items'] && partsModel['items'].length != 0">
                      <div class="inquiry-sheet-parts-list-main"
                           *ngFor="let item of partsModel['items']" (click)="selectParts(partsModel,item,true)">
                        <div class="parts-list-main-left">{{item.partsAlias}}</div>
                        <div class="parts-list-main-right">{{item.partsName}}</div>
                      </div>
                    </div>
                  </ng-container>
                </div>
              </ng-template>
            </label>
          </div>
          <div apes-col [apesSpan]="4" class="parts-list-info">
            <div>{{partsModel['standardName'] != '' ? partsModel['standardName'] : partsModel['partsName']}}</div>
            <div>{{partsModel['partsCodes']}}</div>
            <div *ngIf="partsModel['partsCodes'] == '' && !partsModel['loading']"
                 class="parts-list-infoTooltip">
              名称模糊，请提供实物图
            </div>
          </div>
          <div apes-col [apesSpan]="3" class="parts-list-price">
            <ng-container *ngIf="partsModel['partsInfos']['price']">
              <span>4S参考价：{{partsModel['partsInfos']['price']}}</span>
            </ng-container>
          </div>
          <div apes-col [apesSpan]="3" class="parts-list-png">
            <ng-container *ngIf="partsModel['partsInfos']['pictures']">
              <apes-upload-images [customStyle]="'small-picture-card'"
                                  [title]="null"
                                  [initData]="partsModel['partsInfos']['pictures']"
                                  [disabled]="true"
                                  [showLimitTooltip]="false"
                                  [limit]="5"></apes-upload-images>
            </ng-container>
          </div>
          <div apes-col [apesSpan]="4" class="parts-list-remark">
            <span *ngIf="partsModel['partsInfos']['remark']">备注:{{partsModel['partsInfos']['remark']}}</span>
          </div>
          <div apes-col [apesSpan]="3" class="parts-list-png"></div>
          <div apes-col [apesSpan]="1" class="parts-list-edit"></div>
        </div>
      </apes-card>
    </div>


    <!--    <div class="inquiry-sheet-btn-main" *ngIf="partsList.length != 0">-->
    <!--      <button apes-button-->
    <!--              apesType="primary"-->
    <!--              [apesLoading]="isQueryLoading"-->
    <!--              (click)="submit()">-->
    <!--        发起询价-->
    <!--      </button>-->
    <!--    </div>-->

  </apes-card>

  <apes-card [apesTitle]="titleTemplate" *ngIf="true">

    <ng-template #titleTemplate>
      <div class="inquiry-sheet-title">
        <div>询价轮胎</div>
      </div>
    </ng-template>

    <div class="inquiry-sheet-parts-main">
      <apes-card>
        <div apes-row class="parts-main">
          <div apes-col [apesSpan]="1" class="parts-list-num">
            <span>{{partsList.length == 0 ? 1 : partsList.length + 1}}</span>
          </div>

          <div apes-col [apesSpan]="4">
            <label>
              <apes-ng-select [selectData]="selectTyre"
                              [placeholder]="'请输入规格尺寸，例 225/40R19'"
                              [valueFormatter]="'value.NAME'"
                              [downFormatter]="'value.NAME'"
                              [searchSelectApi]="searchTyreApi"
                              [disabled]="checkQueryData()"
                              (change)="addTyreData($event)"></apes-ng-select>
            </label>
          </div>
          <div apes-col [apesSpan]="18"></div>
        </div>
      </apes-card>
    </div>

  </apes-card>

  <apes-card>
    <div class="inquiry-sheet-parts-main" *ngIf="partsList.length != 0">
      <div>已选询价配件：</div>
      <apes-card>
        <div apes-row
             *ngFor="let parts of partsList, let i =index;"
             class="parts-main">
          <div apes-col [apesSpan]="1" class="parts-list-num">
            <span>{{parts['num']}}</span>
          </div>

          <!-- 配件 -->
          <ng-container *ngIf="parts.typeTag == 'common'">
            <div apes-col [apesSpan]="3">
              <label>
                <input apes-input
                       placeholder="请输入配件名称/编码"
                       [(ngModel)]="parts['value']"
                       (ngModelChange)="checkParts($event,parts)"
                       (paste)="onPaste($event,parts)"
                       (focus)="checkFocus(parts)"
                       apes-popover
                       [(apesVisible)]="parts['visible']"
                       (blur)="closeList(parts,$event)"
                       apesPopoverTrigger="null"
                       [apesPopoverContent]="inputTemplate"
                       apesPopoverPlacement="bottomLeft"
                       [disabled]="checkRootIn(parts)"
                />
                <span *ngIf="checkPartsName(parts)" class="parts-list-inputTooltip">该配件名有重复！</span>
                <ng-template #inputTemplate>
                  <div class="inquiry-sheet-parts-list">
                    <ng-container *ngIf="parts['loading']">
                      <apes-spin apesSimple style="text-align: center;margin: 20px;"></apes-spin>
                    </ng-container>
                    <ng-container *ngIf="!parts['loading']">
                      <div *ngIf="parts['items'] && parts['items'].length == 0">暂无配件信息</div>
                      <div *ngIf="parts['items'] && parts['items'].length != 0">
                        <div class="inquiry-sheet-parts-list-main"
                             *ngFor="let item of parts['items']" (click)="selectParts(parts,item,false)">
                          <div class="parts-list-main-left">{{item.partsAlias}}</div>
                          <div class="parts-list-main-right">{{item.partsName}}</div>
                        </div>
                      </div>
                    </ng-container>
                  </div>
                </ng-template>
              </label>
            </div>
          </ng-container>

          <!-- 轮胎 -->
          <ng-container *ngIf="parts.typeTag == 'tyre'">
            <div apes-col [apesSpan]="3">
              <label>
                <apes-ng-select [selectData]="parts.value"
                                [valueFormatter]="'value.NAME'"
                                [downFormatter]="'value.NAME'"
                                [disabled]="!parts['edit']"
                                [searchSelectApi]="searchTyreApi"
                                (change)="checkData($event,parts)"></apes-ng-select>
                <span *ngIf="checkTyrePartsName(parts)" class="parts-list-inputTooltip">该规格尺寸有重复！</span>
              </label>
            </div>
          </ng-container>

          <!-- 带安 -->
          <ng-container *ngIf="parts.typeTag == 'refit'">
            <div apes-col [apesSpan]="3">
              <!--              <div>{{parts.name}}</div>-->
              <label>
                <input apes-input
                       [(ngModel)]="parts['value']"
                       [disabled]="true"
                />
              </label>
            </div>
          </ng-container>

          <div apes-col [apesSpan]="4" class="parts-list-info">
            <div>{{showPartsName(parts)}}</div>
            <div>{{parts['partsCodes']}}</div>
            <div *ngIf="parts['partsCodes'] == '' && !parts['loading']" class="parts-list-infoTooltip">名称模糊，请提供实物图</div>
          </div>
          <div apes-col [apesSpan]="3" class="parts-list-price">
            <ng-container *ngIf="parts['partsInfos']['price']">
              <span>4S参考价：{{parts['partsInfos']['price']}}</span>
            </ng-container>
          </div>
          <div apes-col [apesSpan]="3" class="parts-list-png">
            <div>
              <apes-upload-images [customStyle]="'small-picture-card'"
                                  [title]="null"
                                  [initData]="parts['partsInfos']['pictures']"
                                  [disabled]="true"
                                  [showLimitTooltip]="false"
                                  [limit]="5"></apes-upload-images>
            </div>
            <!--            <div *ngIf="parts['partsInfos']['pictures']" class="parts-list-png-partition"></div>-->
          </div>
          <div apes-col [apesSpan]="4" class="parts-list-remark">
            备注:
            <span *ngIf="!parts['partsInfos']['remark']">--</span>
            <span *ngIf="parts['partsInfos']['remark']">{{parts['partsInfos']['remark']}}</span>
            <input apes-input [(ngModel)]="parts['partsInfos']['otherRemark']">
          </div>
          <div apes-col [apesSpan]="3" class="parts-list-png">
            <div>
              <apes-upload-images
                [customStyle]="'small-picture-card'"
                [title]="null"
                [showRemove]="true"
                [type]="imgType"
                [initData]="parts['partsInfos']['otherImg']"
                (change)="checkImgData($event,parts['partsInfos'],'otherImg')"
                [limit]="3"></apes-upload-images>
            </div>
          </div>
          <div apes-col [apesSpan]="1" class="parts-list-edit">
            <div class="parts-list-edit-btn" (click)="removeParts(i)">删除</div>
          </div>
        </div>
      </apes-card>
    </div>
  </apes-card>

</apes-content>
